/*
预售、KA
category: 1 - 景点, 2 - 酒店
sale_style: 0 - 日历, 1 - 抢购
douyinProductType: 3 - 预售券, 5 - 门票
*/

import React, { Component } from 'react';
import Taro from '@tarojs/taro';
import Skeleton from 'taro-skeleton';
import classnames from 'classnames';
import {View, Image, Text, Input, Button} from '@tarojs/components';
import {AtIcon} from 'taro-ui';
import {newHttp} from "../../utils/request";
import {
  CREATE_PRE_ORDER_TT,
  CALC_PRE_ORDER_TT,
  PAY_PRE_ORDER_TT,
  KA_ORDER_GOOD_DETAIL_TT,
  KA_GET_CANLENDAR_TT,
  KA_DATE_RANGE_TT
} from '../../constants/api';
import {GetRequest, deepClone, getStorageSync, setStorageSync} from '../../utils/tools';
import calendarObj from "../../utils/calendar";
import MaskLayer from "./components/maskLayer";
import CalendarScenic from "./components/calendarScenic";
import CalendarHotel from "./components/calendarHotel";
import {http} from "../../utils/http";
import {payment as payMent} from "../../utils/payment.service";
import './index.scss';

const weeks = ["日", "一", "二", "三", "四", "五", "六"];

export default class PayReplaceZJpay extends Component {

  calendarHotelRef = React.createRef<any>();

  state = {
    showLoading: true,
    goodsId: "",
    uuid: "",
    goodsInfo: null,
    orderGoods: {},
    localPhone: '',
    linkman: '',
    identity_num: '',
    phoneFocused: false,
    linkmanFocused: false,
    identitynumFocused: false,
    moneyInfo: {
      totalFee: 0,
      num: 1,
      buy_num_min: 1,
      buy_num_max: 100
    },
    payInfo: {
      payToken: '',
    },
    payGoosList: null,
    douyinProductType: null, // 商品类型(3: 预售, 5: 门票)
    canShowPhoneBtn: true,
    showIdCard: false,
    calculating: false, // 暂限制 1个
    payDisabled: false, // 是否禁用支付按钮
    isStockOut: false, // 是否库存不足
    submiting: false,
    threeDates: [],
    calendarVisible: false,
    calendarData: [],
    currentDate: {},
    hotelDateRange: {},
    travelerVisible: false
  }

  async UNSAFE_componentWillMount() {
    if (!tt.canIUse('createOrder')) {
      Taro.showModal({
        title: '',
        content: '您的抖音版本过低，暂不支持下单，请前往应用商店升级',
        showCancel: false,
        success: () => {
          tt.exitMiniProgram();
        }
      })
    }
  }

  async componentDidShow() {
    const {id: goodsId, uuid, douyin_product_type, min_limits} = Taro.getCurrentInstance().router.params;
    console.log("douyin_product_type : ", douyin_product_type)
    tt.getSystemInfo({
      success: res => {
        console.log("getSystemInfo ------------ : ", res);
        const SDKVersionArr = res.SDKVersion.split(".");
        // 预售
        const douyinProductType3 = douyin_product_type * 1 === 3 && SDKVersionArr[0] === "2" && SDKVersionArr[1] < "57";
        // 门票
        const douyinProductType5 = douyin_product_type * 1 === 5 && SDKVersionArr[0] === "2" && SDKVersionArr[1] < "67";
        this.setState({
          payDisabled: douyinProductType3 || douyinProductType5
        })
        if (douyinProductType3 || douyinProductType5) {
          Taro.showModal({
            title: '',
            content: '您的抖音版本过低，暂不支持下单，请前往应用商店升级',
            showCancel: false,
            success: () => {
              Taro.navigateBack();
            }
          })
        }
      }
    })
    const moneyNum = {num: min_limits || 1};
    console.log("goodsId : ", goodsId)
    console.log("uuid : ", uuid)
    this.setState(state => ({
      goodsId,
      uuid,
      douyinProductType: +douyin_product_type,
      localPhone: Taro.getStorageSync('localPhone'),
      moneyInfo: {
        ...state.moneyInfo,
        ...moneyNum
      }
    }), () => {
      this.getGoodsInfo(this.state.goodsId);
    })
  }

  // 获取商品信息
  async getGoodsInfo(goodsId) {
    const res = await newHttp.post(KA_ORDER_GOOD_DETAIL_TT, {goodsId, useIntegral: false, isComments: true});
    if (res && res.data) {
      const {ThreeDayCalendar, goods} = res.data;
      const custom_item_config = JSON.parse(goods.custom_item_config);
      this.setState({
        goodsInfo: res.data,
        showIdCard: custom_item_config.idcard
      }, async () => {
        console.log("goodsInfo --------- : ", this.state.goodsInfo);
        // 直接进提单页时
        if (!this.state.uuid) {
          this.setState({
            uuid: goods.uuid
          })
        }
        goods.sale_style === 0 && (await this.getCalendar(this.state.uuid));
        // 景点
        if (goods.category === 1) {
          if (ThreeDayCalendar && ThreeDayCalendar.length > 0) {
            const threeDates: any = [];
            ThreeDayCalendar.map(item => {
              threeDates.push({
                ...item,
                label: item.week_str.replace("星期", "周"),
                name: calendarObj.getFormatDate(item.date, "MM-dd"),
                fullName: item.date
              })
            })
            this.setState({
              threeDates,
              currentDate: threeDates[0]
            })
          }
        }
        // 创建订单
        this.preOrderCreate()
      })
    }
    Taro.hideLoading()
  }

  // 获取日历库存
  async getCalendar(goodsUuid) {
    const res = await newHttp.post(KA_GET_CANLENDAR_TT, {goodsUuid});
    if (res && res.data) {
      this.setState({calendarData: res.data || []});

      if (this.state.goodsInfo.goods.category === 2) {
        // 处理酒店默认订退日期
        const start = res.data[0].date,
          end = calendarObj.getDateByDate(start, 1),
          day = calendarObj.getDateDiff(start, end);

        const currentDate = { start, end };
        // this.setState({ currentDate });
        this.setState(state => ({
          currentDate: {
            ...state.currentDate,
            ...currentDate
          }
        }), () => {
          this.getHotelDateRange();
        });
      }
    }
  }

  // 获取酒店入住日期(完后计算价格)
  async getHotelDateRange() {
    const {currentDate} = this.state;
    Taro.showToast({
      title: "请稍等...",
      icon: "none",
    });
    const res = await newHttp.catchGet(KA_DATE_RANGE_TT, {
      start_date: currentDate.start,
      end_date: currentDate.end
    });
    // if(status && status === "test") res = {data: {}}; // 场景测试

    if (res) {
      const data = res;
      let startWeek = "", endWeek = "";

      if (data.startDateObj) {
        const startDate = `${data.startDateObj.year}-${data.startDateObj.month}-${data.startDateObj.day}`;
        startWeek = "周" + weeks[new Date(startDate).getDay()];
      } else {
        const hotelDateRange = {
          startDateObj: {}
        };
        this.setState(state => ({
          hotelDateRange: {
            startDateObj: {
              ...state.hotelDateRange.startDateObj,
              ...hotelDateRange.startDateObj
            }
          }
        }));
      }
      if (data.endDateObj) {
        const endDate = `${data.endDateObj.year}-${data.endDateObj.month}-${data.endDateObj.day}`;
        endWeek = "周" + weeks[new Date(endDate).getDay()];
      } else {
        const hotelDateRange = {
          startDateObj: {},
          endDateObj: {}
        };
        this.setState(state => ({
          hotelDateRange: {
            startDateObj: {
              ...state.hotelDateRange.startDateObj,
              ...hotelDateRange.startDateObj
            },
            endDateObj: {
              ...state.hotelDateRange.endDateObj,
              ...hotelDateRange.endDateObj
            }
          }
        }));
      }

      if (data.startDateObj && data.endDateObj) {
        const hotelDateRange = {
          ...data,
          startWeek,
          endWeek
        };
        this.setState(state => ({
          hotelDateRange: {
            ...state.hotelDateRange,
            ...hotelDateRange
          }
        }));
      } else {
        // 日期无效时是否提示
        // ...
        this.setState({currentDate: {}});
        this.calendarHotelRef.current.clearStayDates();
      }
    } else {
      // 日期无效时是否提示
      // ...
      const hotelDateRange = {
        startDateObj: {},
        endDateObj: {}
      };
      this.setState(state => ({
        hotelDateRange: {
          startDateObj: {
            ...state.hotelDateRange.startDateObj,
            ...hotelDateRange.startDateObj
          },
          endDateObj: {
            ...state.hotelDateRange.endDateObj,
            ...hotelDateRange.endDateObj
          }
        },
        currentDate: {}
      }));
      this.calendarHotelRef.current.clearStayDates();
    }
  }

  // 点击3天日期
  async handleClickDate(item) {
    if (this.state.calculating) {
      Taro.showToast({
        title: "正在计算中...",
        icon: "none",
      })
      return;
    }
    this.setState({
      calculating: true,
      currentDate: item
    }, () => {
      Taro.showToast({
        title: "计算中...",
        icon: "none"
      });
      this.getMoney()
    })
  }

  // 关闭层
  closeLayer = () => {
    this.setState({
      calendarVisible: false,
      travelerVisible: false
    });
  }
  // 打开日历
  handleOpenCalendar = () => {
    if (this.state.calculating) {
      Taro.showToast({
        title: "正在计算中...",
        icon: "none",
      })
      return;
    }
    this.setState({
      calendarVisible: true
    });
  }
  // 确定日历(景点)
  handleSureDate = async ({date}) => {
    const temp_threeDates = deepClone(this.state.threeDates);
    this.setState({calculating: true});
    this.closeLayer();
    // 所选日期大于中间日期
    if (date.date > temp_threeDates[1].fullName) {
      const dateObj = {
        label: date.label,
        name: calendarObj.getFormatDate(date.date, "MM-dd"),
        fullName: date.date
      };
      // 替换3天日期中的最后一个
      temp_threeDates.splice(2, 1, dateObj);
      this.setState({
        threeDates: temp_threeDates
      });
    }
    const currentDate = {
      ...date,
      fullName: date.date
    };
    this.setState({
      currentDate
    }, () => {
      Taro.showToast({
        title: "计算中...",
        icon: "none",
      });
      this.getMoney();
    })
  }

  // 确定日历(酒店)
  handleSureDateRange = ({date}) => {
    const currentDate = {
      start: date.length > 0 ? date[0] : "",
      end: date.length > 1 ? date[date.length - 1] : ""
    };
    this.setState(state => ({
      currentDate: {
        ...state.currentDate,
        ...currentDate
      }
    }), async () => {
      if (date.length > 1) {
        this.getHotelDateRange();
        this.setState({calculating: true});
        await this.getMoney();
        this.closeLayer();
      }

      if (!this.state.currentDate.start && !this.state.currentDate.end) {
        const hotelDateRange = {
          startDateObj: {}
        };
        this.setState(state => ({
          hotelDateRange: {
            startDateObj: {
              ...state.hotelDateRange.startDateObj,
              ...hotelDateRange.startDateObj
            }
          }
        }));
      }
    });
  }

  // 购买须知
  viewPurchase() {
    console.log("view purchase");
  }

  // 获取手机号
  getPhoneNumberHandler = async (e) => {
    let phoneNumber = getStorageSync('localPhone')
    if (!phoneNumber) {
      const randomUuid = getStorageSync('randomUuid')
      const {iv, encryptedData} = e.detail
      const data = {iv, encryptedData}
      const ret = await http.carGet(`msvc-shop/v2/bytedance/user/phone/` + randomUuid, data)
      if (ret) {
        phoneNumber = JSON.parse(ret).phoneNumber || ''
        setStorageSync('localPhone', phoneNumber)
      }
    }
    this.setState({localPhone: phoneNumber});
  }
  // 份数输入框
  handleNumberInput = async (e) => {
    const {douyinProductType, goodsInfo, moneyInfo, currentDate, hotelDateRange} = this.state;
    const value = e.detail.value * 1;
    // 预售限1份
    if (douyinProductType === 3 && value !== 1) {
      Taro.showToast({
        title: "购买数量限为1",
        icon: "none",
        mask: true
      });
      if (moneyInfo.num !== 1) {
        this.setState(state => ({
          moneyInfo: {
            ...state.moneyInfo,
            num: 1
          }
        }));
      }
      return;
    }
    // 酒店日历
    if (goodsInfo.goods.category === 2 && goodsInfo.goods.sale_style === 0) {
      const conditionHotel = !currentDate.start || !currentDate.end || Object.keys(hotelDateRange.startDateObj).length === 0;
      if (conditionHotel) {
        Taro.showToast({
          title: "请选择入住日期",
          icon: "none"
        });
        return;
      }
    }

    if (!value) {
      this.setState(state => ({
        moneyInfo: {
          ...state.moneyInfo,
          num: 1
        }
      }));
    } else {
      this.setState(state => ({
        moneyInfo: {
          ...state.moneyInfo,
          num: value
        }
      }));
    }

    this.setState({calculating: true});
    Taro.showToast({
      title: "计算中...",
      icon: "none",
    });
    await this.getMoney();
  }

  // 改变购买份数
  async handleNumberbox(type) {
    const {douyinProductType, goodsInfo, currentDate, hotelDateRange, moneyInfo} = this.state;
    if (this.state.calculating) {
      Taro.showToast({
        title: "正在计算中...",
        icon: "none",
      })
      return;
    }

    let conditionHotel = false; // 酒店日历条件
    if (goodsInfo.goods.category === 2 && goodsInfo.goods.sale_style === 0) {
      conditionHotel = !currentDate.start || !currentDate.end || Object.keys(hotelDateRange.startDateObj).length === 0;
    }

    if (type === "minus") {
      // 最小限1份
      if (moneyInfo.num === 1) {
        Taro.showToast({
          title: "最小购买数量是1",
          icon: "none",
        })
        return;
      }
      // 酒店日历
      if (conditionHotel) {
        Taro.showToast({
          title: "请选择入住日期",
          icon: "none"
        });
        return;
      }

      Taro.showToast({
        title: "计算中...",
        icon: "none",
      });
      this.setState(state => ({
        calculating: true,
        moneyInfo: {
          ...state.moneyInfo,
          num: moneyInfo.num - 1
        }
      }), async () => {
        console.log("减 ----------- ： ", this.state.moneyInfo.num)
        await this.getMoney();
      });
    } else {
      // 预售限1份
      if (douyinProductType === 3 && moneyInfo.num === 1) {
        Taro.showToast({
          title: "最大购买数量是1",
          icon: "none",
        })
        return;
      }
      // 酒店日历
      if (conditionHotel) {
        Taro.showToast({
          title: "请选择入住日期",
          icon: "none"
        });
        return;
      }

      Taro.showToast({
        title: "计算中...",
        icon: "none",
      });
      this.setState(state => ({
        calculating: true,
        moneyInfo: {
          ...state.moneyInfo,
          num: moneyInfo.num + 1
        }
      }), async () => {
        await this.getMoney()
      })
    }
  }

  // 获取份数价格
  async getMoney() {
    const {douyinProductType, orderGoods, goodsInfo, moneyInfo, currentDate} = this.state;
    const orderNum = orderGoods.order_num, buyAmount = moneyInfo.num;
    let res = null, params = {orderNum, buyAmount};
    if (douyinProductType !== 3) {
      if (goodsInfo.goods.category === 1) {
        params.buyDate = currentDate.fullName;
      } else {
        const buyDateRange = {
          start: currentDate.start,
          end: currentDate.end
        };
        params.buyDateRange = JSON.stringify(buyDateRange);
      }
    }
    res = await newHttp.post(CALC_PRE_ORDER_TT, params);
    console.log("获取份数价格 : ", res);
    if (res && res.data) {
      if (res.data.pay_token) {
        const totalFee = res.data.total_fee;
        const payToken = res.data.pay_token;

        this.setState(state => ({
          calculating: false,
          moneyInfo: {
            ...state.moneyInfo,
            totalFee
          },
          payInfo: {
            ...state.payInfo,
            payToken
          }
        }), () => {
          Taro.hideToast();
        });
      }
    } else {
      if (res && (typeof res === "string")) {
        // 日期价格无效
        if (res.indexOf("deed") > -1) {
          Taro.showModal({
            content: res.replace(/deed/g, ""),
            showCancel: false,
            success: res => {
              // 库存不足: 默认当天
              this.setState({
                currentDate: this.state.threeDates[0],
                calendarVisible: true
              })
            }
          });
        }
        // 库存不足
        if (res === "库存不足") {
          Taro.showToast({
            title: res,
            icon: "none",
            duration: 3000
          });
          this.setState({isStockOut: true});
        }
      }
      if (res && (typeof res === "object")) {
        // 针对购买数量
        if (res.msg && res.isEnough === "0") {
          this.setState(state => ({
            moneyInfo: {
              ...state.moneyInfo,
              num: res.buy_num_max
            }
          }), () => {
            Taro.showModal({
              title: '提示',
              content: res.msg,
              showCancel: false,
              confirmText: '知道了'
            });
            this.getMoney();
          })
        }
      }
      this.setState({calculating: false});
    }
  }

  // create order
  async preOrderCreate() {
    const {uuid, douyinProductType} = this.state;
    const ret = await newHttp.post(CREATE_PRE_ORDER_TT, {
      goodsUUID: uuid,
      isBookOrder: douyinProductType !== 3 ? 0 : 1
    })
    console.log("create order ------ : ", ret)

    if (ret && ret.data) {
      const totalFee = ret.data.unit_fee;
      this.setState(state => ({
        moneyInfo: {
          ...state.moneyInfo,
          totalFee
        },
        orderGoods: ret.data,
        showLoading: false
      }), async () => {
        console.log("moneyInfo : ", this.state.moneyInfo);
        await this.getMoney();
      });
    }
  }

  // do pay
  async buyNow() {
    const {
      douyinProductType,
      moneyInfo,
      localPhone,
      linkman,
      showIdCard,
      identity_num,
      currentDate,
      hotelDateRange,
      goodsInfo,
      payGoosList,
      orderGoods,
      payInfo
    } = this.state;
    if (this.state.isStockOut) {
      Taro.showToast({
        title: "库存不足",
        icon: "none"
      })
      return;
    }

    if (this.state.submiting) return;
    const phoneReg = /^1[0-9]{10}$/;
    const idcardReg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;

    // 酒店日历
    if (goodsInfo.goods.category === 2 && goodsInfo.goods.sale_style === 0) {
      const conditionHotel = !currentDate.start || !currentDate.end || Object.keys(hotelDateRange.startDateObj).length === 0;
      if (conditionHotel) {
        Taro.showToast({
          title: "请选择入住日期",
          icon: "none"
        });
        return;
      }
    }
    if (localPhone === "") {
      Taro.showToast({
        title: "请检查手机号是否填写",
        icon: "none"
      })
      return;
    } else if (!phoneReg.test(localPhone)) {
      Taro.showToast({
        title: "手机号格式不正确",
        icon: "none"
      });
      return;
    }
    if (!linkman) {
      Taro.showToast({
        title: "请输入姓名",
        icon: "none"
      });
      return;
    }
    if (showIdCard) {
      if (!identity_num) {
        Taro.showToast({
          title: "请输入身份证",
          icon: "none"
        });
        return;
      } else if (!idcardReg.test(identity_num)) {
        Taro.showToast({
          title: "身份证号格式不正确",
          icon: "none"
        });
        return;
      }
    }

    Taro.showLoading({
      title: '请稍等...'
    });
    this.setState({submiting: true});
    let res: any = payGoosList;
    // 避免重复下单
    if (!res) {
      const orderNum = orderGoods.order_num,
        phone = localPhone,
        payToken = payInfo.payToken,
        isBookOrder = douyinProductType !== 3 ? 0 : 1,
        isTicketType = douyinProductType === 5 ? douyinProductType : 0;
      const params = {orderNum, phone, payToken, isBookOrder, isTicketType};
      if (!!linkman) params.linkman = linkman;
      if (!!identity_num) params.identityNum = identity_num;
      console.log("pay params : ", params);
      res = await newHttp.post(PAY_PRE_ORDER_TT, params);
      this.setState({payGoosList: res});
    }
    console.log("res : ", res);

    if (res && res.data && (res.data.goodsList || res.data.skuList)) {
      const {bookInfo, goodsList, skuList, payment, contactInfo, callbackData} = res.data;
      console.log("tt.createOrderParam: ", res.data)

      if (douyinProductType !== 5) {
        const result = await payMent.payment({goodsList, payment, contactInfo, callbackData})
        if (result) {
          Taro.redirectTo({url: '/main/order/success?pay=' + moneyInfo.totalFee});
        } else {
          Taro.hideLoading()
          this.setState({submiting: false});
        }
      } else {
        delete bookInfo.itemBookInfoList[0].reservationInfoList[0].identificationNumber;
        const result = await payMent.payment({bookInfo, skuList, payment, contactInfo, callbackData})
        if (result) {
          Taro.redirectTo({url: '/main/order/success?pay=' + moneyInfo.totalFee});
        } else {
          Taro.hideLoading()
          this.setState({submiting: false});
        }
      }
    } else {
      this.setState({submiting: false});
    }
  }

  // focus phone
  handleFocusPhone = () => {
    this.setState({phoneFocused: true});
  };

  // blur phone
  handleBlurPhone = () => {
    this.setState({phoneFocused: false});
  };

  // 清除手机号
  clearLocalPhone = () => {
    this.setState({localPhone: ""});
  };

  // focus linkman
  handleFocusLinkman = () => {
    this.setState({linkmanFocused: true});
  };

  // blur linkman
  handleBlurLinkman = () => {
    this.setState({linkmanFocused: false});
  };

  // 清除联系人
  clearLinkman = () => {
    this.setState({linkman: ""});
  };

  // focus idcard
  handleFocusIdCard = () => {
    this.setState({identitynumFocused: true});
  };

  // blur idcard
  handleBlurIdCard = () => {
    this.setState({identitynumFocused: false});
  };

  // clear idcard
  clearIdCard = () => {
    this.setState({identity_num: ""});
  };

  handlerChange(field, e) {
    this.setState({[field]: e.detail.value})
  }

  render() {
    const {
      showLoading,
      submiting,
      canShowPhoneBtn,
      payDisabled,
      douyinProductType,
      moneyInfo,
      goodsInfo,
      hotelDateRange,
      orderGoods,
      threeDates,
      currentDate,
      phoneFocused,
      localPhone,
      linkmanFocused,
      linkman,
      identitynumFocused,
      identity_num,
      calendarVisible,
      travelerVisible,
      calendarData
    } = this.state;

    return (
      <View className='pay-replace-zijie'>
        <Skeleton
          loading={showLoading}
          title
          titleWidth='100%' rowHeight='120px'
        >
          <View className='goods-info'>
            <View className='goods-show'>
              <View className='good-img'>
                <Image
                  src={orderGoods.main_img}
                  mode='aspectFill'
                  style='width: 100%; height: 100%;border-radius: 6px'
                />
              </View>
              <View className='good-desc'>
                <View className='name'>{orderGoods.product_name}</View>
                {
                  douyinProductType !== 5 &&
                  <View className='tags'>
                    <Text className='tag-t'>过期退</Text>
                    <Text className='tag-t'>随时退</Text>
                  </View>
                }
              </View>
              <View className='good-price'>￥{moneyInfo.totalFee}</View>
            </View>

            {
              douyinProductType === 5 && goodsInfo && !goodsInfo.goods.sale_style &&
              <View className='title-block calendar-box'>
                <View className='title'>{goodsInfo.goods.category === 1 ? "出行日期" : "入住日期"}</View>
                {
                  goodsInfo && goodsInfo.goods && goodsInfo.goods.category === 1 &&
                  <View className='calendar-tools'>
                    {
                      threeDates.map((item, index) => (
                        <View
                          key={index}
                          className={classnames("date-block flex-item", {
                            ["active"]: currentDate.fullName === item.fullName
                          })}
                          onClick={() => this.handleClickDate(item)}
                        >
                          <View className='label'>{item.label}</View>
                          <View>{item.name}</View>
                        </View>
                      ))
                    }
                    <View className='date-block date-more' onClick={this.handleOpenCalendar}>
                      <View className='more-btn'>
                        <View className='label'>更多</View>
                        <View>日期</View>
                      </View>
                      <View className='more-icon'>
                        <AtIcon value='chevron-right' size='14' color='#303133' />
                      </View>
                    </View>
                  </View>
                }

                {
                  goodsInfo && goodsInfo.goods && goodsInfo.goods.category === 2 && hotelDateRange.startDateObj &&
                  <View className='calendar-hotel' onClick={this.handleOpenCalendar}>
                    {
                      hotelDateRange.startDateObj && Object.keys(hotelDateRange.startDateObj).length > 0 ?
                      <View className='ch-left'>
                        <Text
                          className='date-text'
                        >{hotelDateRange.startDateObj.month}月{hotelDateRange.startDateObj.day}日</Text>
                        <Text className='date-week'>{hotelDateRange.startWeek}</Text>
                        <Text className='date-stay'>共{hotelDateRange.day}晚</Text>
                        <Text
                          className='date-text'
                        >{hotelDateRange.endDateObj.month}月{hotelDateRange.endDateObj.day}日</Text>
                        <Text className='date-week'>{hotelDateRange.endWeek}</Text>
                      </View>
                      :
                      <View v-else className='ch-left ch-left_place'>请选择入住日期</View>
                    }
                    <View className='ch-right'>
                      <AtIcon value='chevron-right' size='12' color='#303133' />
                    </View>
                  </View>
                }
              </View>
            }

            <View className='goods-num'>
              <Text className='num'>购买份数</Text>
              <View className='diy-numberbox'>
                <View className='diy-btn diy-minus' onClick={() => this.handleNumberbox('minus')}>
                  <AtIcon value='subtract' size='12' color='#323233' />
                </View>
                <View className='diy-number'>
                  <Input type='number' value={moneyInfo.num} onBlur={this.handleNumberInput} />
                </View>
                <View className='diy-btn diy-plus' onClick={() => this.handleNumberbox('plus')}>
                  <AtIcon value='add' size='12' color='#323233' />
                </View>
              </View>
            </View>

            <View className='sub-total'>
              <Text className='title'>小计</Text>
              <Text className='price'>￥{moneyInfo.totalFee}</Text>
            </View>
          </View>
        </Skeleton>

        <Skeleton
          loading={showLoading}
          title
          titleWidth='100%' rowHeight='70px'
        >
          <View className='apt-block apt-form-info'>
            <View className='order-user'>
              <View className='ou-title'>
                <Text className='uni-form-item__title'>联系方式 (必填)</Text>
              </View>
              <View className='creatForm'>
                <View className='uni-form-item uni-column'>
                  <View className='uni-input-wrapper' style='flex: 1;'>
                    <View className='cus-flex-between'>
                      <View className='placeholder-cus-cla-wrapper'>
                        <Input
                          className='uni-input-cus'
                          type='number'
                          maxLength={11}
                          value={localPhone}
                          placeholder='输入手机号码 (仅用于商家确认)'
                          placeholder-style='font-size: 28rpx; color: #C0C4CC;'
                          onInput={this.handlerChange.bind(this, 'localPhone')}
                          onFocus={this.handleFocusPhone}
                          onBlur={this.handleBlurPhone}
                        />
                      </View>
                      {
                        phoneFocused && localPhone != '' &&
                        <View
                          className='u-input__right-icon__clear u-input__right-icon__item'
                          style='margin-bottom: -3px;'
                          onClick={this.clearLocalPhone}
                        >
                          <AtIcon value='close-circle' size='18' color='#c0c4cc' />
                        </View>
                      }
                    </View>
                  </View>
                  {
                    canShowPhoneBtn &&
                    <View className='phone-btn'>
                      <Button
                        className='phone-btn'
                        open-type='getPhoneNumber'
                        onGetPhoneNumber={this.getPhoneNumberHandler}
                      >一键填写</Button>
                    </View>
                  }
                </View>
              </View>
            </View>
            <View className='oi-block'>
              <View className='label label-block'>
                <View>姓</View>
                <View>名</View>
              </View>
              <View className='right'>
                <View className='cus-flex-between'>
                  <View className='placeholder-cus-cla-wrapper'>
                    <Input
                      className='uni-input-cus'
                      type='text'
                      value={linkman}
                      placeholder='请输入姓名'
                      placeholder-style='font-size: 28rpx; color: #C0C4CC;'
                      onInput={this.handlerChange.bind(this, 'linkman')}
                      onFocus={this.handleFocusLinkman}
                      onBlur={this.handleBlurLinkman}
                    />
                  </View>
                  {
                    linkmanFocused && linkman != '' &&
                    <View
                      className='u-input__right-icon__clear u-input__right-icon__item'
                      style='margin-bottom: -3px;'
                      onClick={this.clearLinkman}
                    >
                      <AtIcon size='18' value='close-circle' color='#c0c4cc' />
                    </View>
                  }
                </View>
              </View>
            </View>
            <View className='oi-block'>
              <View className='label label-block'>
                <View>身</View>
                <View className='ct'>份</View>
                <View>证</View>
              </View>
              <View className='right'>
                <View className='cus-flex-between'>
                  <View className='placeholder-cus-cla-wrapper'>
                    <Input
                      className='uni-input-cus'
                      type='idcard'
                      value={identity_num}
                      cursor-spacing='50'
                      maxLength={18}
                      placeholder='请输入身份证'
                      placeholder-style='font-size: 28rpx; color: #C0C4CC;'
                      onInput={this.handlerChange.bind(this, 'identity_num')}
                      onFocus={this.handleFocusIdCard}
                      onBlur={this.handleBlurIdCard}
                    />
                  </View>
                  {
                    identitynumFocused && identity_num != '' &&
                    <View
                      className='u-input__right-icon__clear u-input__right-icon__item'
                      style='margin-bottom: -3px;'
                      onClick={this.clearIdCard}
                    >
                      <AtIcon size='18' value='close-circle' color='#c0c4cc' />
                    </View>
                  }
                </View>
              </View>
            </View>
          </View>
        </Skeleton>

        <Skeleton
          loading={showLoading}
          title
          titleWidth='100%' rowHeight='25px'
          skeletonColor='#fff'
        >
          <View className='bottom-btn'>
            <View className='sum'>实付
              <Text className='price'>
                <Text className='label'>￥</Text>
                <Text>{moneyInfo.totalFee}</Text>
              </Text>
            </View>
            <View className='gopay-btn'>
              <Button
                className='gopay-btn_btn'
                type='primary'
                loading={submiting}
                disabled={payDisabled}
                onClick={this.buyNow}
              >立即支付</Button>
            </View>
          </View>
        </Skeleton>
        {
          (calendarVisible || travelerVisible) &&
          <MaskLayer onHideMask={this.closeLayer} />
        }
        {/* 景点日历 */}
        {
          calendarVisible && goodsInfo && goodsInfo.goods && goodsInfo.goods.category === 1 &&
          <CalendarScenic
            currentDate={currentDate}
            visible={calendarVisible}
            calendarData={calendarData}
            goods={goodsInfo.goods}
            closeCalendar={this.closeLayer}
            handleSureDate={this.handleSureDate}
          />
        }
        {/* 酒店日历 */}
        {
          calendarVisible && goodsInfo && goodsInfo.goods && goodsInfo.goods.category === 2 &&
          <CalendarHotel
            ref={this.calendarHotelRef}
            currentDate={currentDate}
            visible={calendarVisible}
            calendarData={calendarData}
            goods={goodsInfo.goods}
            closeCalendar={this.closeLayer}
            handleSureDate={this.handleSureDateRange}
          />
        }
      </View>
    )
  }
}
